<template>
	<view class="p-t-10">
		<view class="modelBox" @click="$util.redirectTo('/otherpages/activityDetali/activityDetali')">
			<view class="flex VisitorItemBox">
				<image class="w-220 h-220 bor-16 m-r-20" :src="$util.img(activedetails.image)" mode=""></image>
				<view class="h-220 flex_c w-400">
					<view class="font-32 font-weight">{{activedetails.title}}</view>
					<view class="font-24 grey">{{activedetails.application_num||0}}人报名</view>
					<view class="flex">
						<view class="wboxA m-r-10"></view>
						<view class="">{{$util.timeStampTurnTime(activedetails.start_time)}}</view>
					</view>
					<view class="flex">
						<view class="wboxB m-r-10"></view>
						<view class="wboxBTxt w-336">{{activedetails.address||''}}</view>
					</view>
				</view>
			</view>
			<view class="flex_b p-t-20 m-t-30" style="border-top: 1rpx solid #f5f5f5;">
				<view class="font-32 font-weight">报名人数</view>
				<view class="flex">
					<view class="font-32 f-t font-weight m-r-50"><text class="font-20">¥</text>{{activedetails.fee||0}}</view>
					<uv-number-box v-model="valueNum" :min="1" :max="activedetails.num-activedetails.application_num" iconStyle="color:#ff5e0f" integer
						button-size="24"></uv-number-box>
				</view>
			</view>
		</view>

		<view class="modelBox">
			<view class="font-32 font-weight">填写报名信息</view>
			<view class="flex formItem">
				<view class="w-152">姓名</view>
				<input type="text" placeholder="填写姓名" v-model="form.username" placeholder-class="font-28 grey">
			</view>
			<view class="flex_b formItem" @click="$util.redirectTo('/frompages/birthday/birthday')">
				<view class="flex">
					<view class="w-152">出生日期</view>
					<view class="grey">{{form.birthday||'请选择'}}</view>
				</view>
				<view class="iconfont icon-xiangyoujiantou grey" style="font-size: 26rpx;"></view>
			</view>
			<view class="flex_b formItem" @click="$util.redirectTo('/frompages/addressSelect/addressSelect')">
				<view class="flex">
					<view class="w-152">居住地</view>
					<view class="grey">{{form.address||'请选择'}}</view>
				</view>
				<view class="iconfont icon-xiangyoujiantou grey" style="font-size: 26rpx;"></view>
			</view>
			<view class="flex formItem">
				<view class="w-152">手机号</view>
				<input type="tel" maxlength="11" v-model="form.mobile" placeholder="输入手机号" placeholder-class="font-28 grey">
			</view>
			<view class="flex_b formItem" @click="$util.redirectTo('/frompages/constellation/constellation')">
				<view class="flex">
					<view class="w-152">星座</view>
					<view class="grey">{{form.constellation||'请选择'}}</view>
				</view>
				<view class="iconfont icon-xiangyoujiantou grey" style="font-size: 26rpx;"></view>
			</view>
		</view>
		<view class="m-l-30">*报名须知</view>
		<view class="font-26 grey m-l-30" v-html="activedetails.notice_content"></view>
		
		<view class="bottom-mar" style="height: 100rpx;"></view>
		<view class="bomPostBox flex_b">
			<view class="font-32 f-t font-weight"><text class="font-24">¥</text>{{activedetails.fee*valueNum}}</view>
			<button type="default" @click="application">去支付</button>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valueNum: 1,
				activedetails:{},
				form:{
					username:'',
					mobile:'',
					birthday:'',
					address:'',
					type:'wechat',
					constellation:''
				}
			};
		},
		onShow() {
			uni.$on('birthdayFn', data=> {
				this.form.birthday = data
			})
			uni.$on('province', data=> {
				console.log('地址：', data);
				this.form.address = data.title
			})
			uni.$on('constellationFn', data=> {
				console.log('星座：', data);
				this.form.constellation = data
			})
		},
		onLoad(res) {
			this.id = res.id
			this.activedetailsFn(res.id)
		},
		methods:{
			application() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: loginRes => {
				
				// 活动报名
				this.$api.sendRequest({
					url:'/api/active/application',
					data:{
						...this.form,
						num:this.valueNum,
						active_active_id:this.id,
						code:loginRes.code
					},success:res=> {
						let data = res.data
						if(res.code==1) {
							uni.requestPayment({
								"provider": "wxpay",
								timeStamp: data.timeStamp, //后端返回的时间戳
								nonceStr: data.nonceStr, //后端返回的随机字符串
								package: data.package, //后端返回的prepay_id
								signType: data.signType, //后端签名算法,根据后端来,后端MD5这里即为MD5
								paySign: data.paySign, //后端返回的签名
								success: res => {
									uni.showModal({
										title: '提示',
										content: '支付成功',
										cancelText: '确定',
										showCancel: false,
										success: resA => {
											uni.navigateBack()
										}
									});
								},
								fail(e) {
									uni.showToast({
										title: '取消支付',
										icon: 'error'
									})
								}
							})
						}else {
							this.$refs.toast.show({
								type: 'default',
								message: res.msg,
								duration:1500
							})
						}
					}
				})
				
				}
				});
			},
			
			activedetailsFn(id) {
				this.$api.sendRequest({
					url: '/api/active/activedetails',
					data: {
						id:id
					},success:res=>{
						this.activedetails = res.data
					}
			})
			},
		}
	}
</script>

<style lang="scss">
	.bomPostBox {
		background-color: #fff;
		height: 100rpx;
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		bottom: 0;
		width: 690rpx;
		padding: 0 30rpx;
		button {
			margin: 0;
		}
	}
	.formItem {
		border-bottom: 1rpx solid #f6f6f6;
		padding: 25rpx 0;

		input {
			font-size: 28rpx;
		}
	}

	.wboxA {
		width: 12rpx;
		height: 12rpx;
		background: #19c37b;
		border-radius: 50%;
	}

	.wboxB {
		width: 12rpx;
		height: 12rpx;
		background: #ff5e00;
		border-radius: 50%;
	}

	.wboxBTxt {
		/* 第一步：让文字强制一行显示 */
		white-space: nowrap;
		/* 第二步：溢出隐藏 */
		overflow: hidden;
		/* 第三步：溢出的内容省略号显示 */
		text-overflow: ellipsis;
	}

	.VisitorItemBox {
		image {
			width: 220rpx;
			height: 220rpx;
		}
	}
</style>
